<template>
	<view>
		<view style="margin-bottom: 20rpx;">
			<view class="contract-center" v-for="(item,index) in list" :key="index" @tap="trigger">
				<view class="center-flex">
					<view class="center">
						<view class="center2-item1">
							{{item.name}}
							<text>{{item.num}}</text>
						</view>
					</view>
					<view class="center" style="text-align: right;font-weight: bold;">
						<view class="center2-item1 color-fall">+408.8%</view>
						<view class="center2-item2">年化收益率</view>
					</view>
				</view>
				<view class="center-flex1" >
					<view class="flex1"><image src="../../../static/logo.png" mode=""></image>管家</view>
					<view class="">10天20时35分</view>
				</view>
			</view>
			<u-loadmore :status="srategying" />
		</view>
	</view>
</template>

<script>
	export default {
		name:'documentaryitem',
		props:{
			srategying:{//加载显示
				type:String
			},
		},
		data() {
			return {
				list: [{
						name: '网格交易',
						num: 'Huobi',
						center: '网格交易的和约版本，放大本金，加上杠杆,分仓套利'
					},
					{
						name: '马丁追踪',
						num: 'Huobi',
						center: '马丁追踪与趋势追踪结合的交易模型，加上杠杆，倍投利器，马丁追踪与趋势追踪结合的交易模型'
					}
				]
			};
		},
		methods:{
			trigger(){
				this.$Router.push({ path: '/pages/transaction/people'})
			}
		}
	}
</script>

<style lang="scss">
$color-opact: $color-fu;
.contract-center {
		background-image: url(../../../static/goods.png);
		@include background;		
		margin: 30rpx 30rpx 30rpx 27rpx;
		/*#ifdef APP-PLUS*/
		margin: 30rpx 0rpx 30rpx 0rpx;
		
		/* #endif*/
		.center-flex{
			@include flex;
			padding: 35rpx 40rpx 20rpx;
		}
		.center-flex1{
			@include flex;
			justify-content: space-between;
			background-color: #E6E6E6;
			border-bottom-left-radius: 18rpx;
			border-bottom-right-radius: 18rpx;
			padding: 10rpx 40rpx ;
			font-size: 24rpx;
			color: #000000;
			.flex1{
				@include flex;
				image{
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					margin-right: 15rpx;
				}
			}
		}
		.center:nth-child(1) {
			width: 70%;
		}
		.center:nth-child(2) {
			width: 30%;
		}
		.center {
			.center2-item1 {
				font-size: 30rpx;
				line-height: 60rpx;

				text {
					padding: 1rpx 25rpx;
					border-radius: 12rpx;
					color: $color-opact;
					font-size: 24rpx;
					margin-left: 20rpx;
					border: 1rpx solid $border;
				}
			}

			.center2-item2 {
				color: $color-opact;
				font-weight: 100;
				font-size: 24rpx;
				
			}
		}
	}
</style>
